<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <meta name="theme-color" content="#1677ff" />
  <meta name="description" content="Xiong" />
  <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
  <link rel="manifest" href="/manifest.json" />
  <title>Xiong</title>
  <script>
    // 移动端适配方案 - 以375×667为基准
    (function flexible(window, document) {
      const docEl = document.documentElement;
      const dpr = window.devicePixelRatio || 1;
      const designWidth = 375; // 设计稿宽度
      const designHeight = 667; // 设计稿高度

      // 设置1rem = 屏幕宽度/375×100
      function setRemUnit() {
        const clientWidth = docEl.clientWidth;
        const rem = (clientWidth / designWidth) * 100;
        docEl.style.fontSize = rem + 'px';
        
        // 设置根元素高度为100vh，防止页面滚动
        docEl.style.height = '100vh';
        docEl.style.overflow = 'hidden';
      }

      setRemUnit();

      // 页面大小改变时重置rem单位
      window.addEventListener('resize', setRemUnit);
      window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          setRemUnit();
        }
      });

      // 检测0.5px支持
      if (dpr >= 2) {
        const fakeBody = document.createElement('body');
        const testElement = document.createElement('div');
        testElement.style.border = '.5px solid transparent';
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
          docEl.classList.add('hairlines');
        }
        docEl.removeChild(fakeBody);
      }
    }(window, document));
  </script>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>

</html>